<template>
    <el-select
        :value="modelData.modelName"
        :disabled="disabled"
        clearable
        filterable
        remote
        placeholder="请输入车型名称搜索"
        :remote-method="debunceSearch"
        @change="handleSel"
        :loading="loading">
        <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.modelName"
            :value="item.id">
        </el-option>
    </el-select>
</template>

<script>

import {carModelGetAll} from "@/api/system/linkageSelect";

export default {
    name: 'modelSelect',
    props: {
        placeholder: {
            type: String,
            default: '请选择'
        },
        value: {
            type: String,
            default: null
        },
        disabled: {
            type: Boolean,
            default: false
        },
        modelData:{
            type:Object,
            default:()=>({})
        }
    },
    // model: {
    //     prop: 'value',
    //     event: 'dateChange'
    // },
    watch: {
        modelData: {
            handler(val, old) {
                // console.log('handler-->', val, old)
                // this.classesAndStudent = val
                if(val.brandId && val.seriesId){
                    this.getData(null)
                }
            },
            deep: true,
            immediate: true
        },
    },

    data() {
        return {
            loading: false,
            options: [],
            classesAndStudent: [],
            visible: false,
            title: "",
            debunceSearch:_.debounce(this.remoteMethod, 1500)
        }
    },
    created() {
    },
    mounted() {
    },
    methods: {
        handleSel(val){
            let modelName=null
            let find = this.options.find(item=>val===item.id);
            if(find){
                modelName=find.label;
            }
            // console.log('val', val, find)
            this.$emit('sel', find?{
                brandName:find.brandName,
                brandId:find.carBrandId,
                seriesName:find.seriesName,
                seriesId:find.carSeriesId,
                modelName:find.modelName,
                modelId:find.id
            }:null)
        },
        remoteMethod(query) {
            // if (query !== '') {
                this.getData(query);
            // } else {
            //     this.options = [];
            // }
        },

        getData(query){
            this.loading = true;

            carModelGetAll({
                carBrandId:this.modelData.brandId,
                carSeriesId:this.modelData.seriesId,
                modelName:query,
            }).then(res=>{
                if(res.code=='200'){
                    // value:[item.carBrandId, item.carSeriesId, item.id],
                    // label:[item.brandName, item.seriesName, item.modelName]

                    this.options = res.data
                    // console.log('result', this.options)
                }else {
                    this.options = [];
                }
                this.loading = false;
            }).catch(e=>{
                this.options = [];
                this.loading = false;
            })
        }
    }


}

</script>

<style lang="scss" scoped></style>
